<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
	<title>Example of collapsing tables</title>

	<style type="text/css">
		@import "fcoltable.css";
    </style>
	<script type="text/javascript" src="fcoltable.js"></script>
</head>
<body>
<div id="boundary">

<h1>Collapsible tables with DOM and CSS</h1>
<p>Each of the tables below has a class called &#34;footcollapse&#34; which makes the script add the arrow images in the footer allowing the table to be collapsed and expanded.</p>
<p>Check <a href="fcoltable.js">the script</a> and <a href="fcoltable.css">the CSS</a> to see how it is done.</p>
<table summary="CDs I listened to recently" class="footcollapse">
	<caption>My recent CDs</caption>

	<thead>
		<tr>
			<th>Title</th>
			<th>Artist</th>
			<th>Quality</th>
		</tr>
	</thead>

	<tfoot>
		<tr>
			<th>Total</th>
			<td colspan="2">5 CDs</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>

			<th>Front 242</th>
			<td>Front By Front</td>
			<td>Quite OK</td>
		</tr>
		<tr class="odd">
			<th>Miss Kittin</th>
			<td>i.com</td>

			<td>good buy</td>
		</tr>
		<tr>
			<th>Die Fantastischen Vier</th>
			<td>Viel</td>
			<td>Nice comeback</td>
		</tr>

		<tr class="odd">
			<th>Nine Inch Nails</th>
			<td>With Teeth</td>
			<td>Oh yes, finally a new one</td>
		</tr>
		<tr>
			<th>Garbage</th>

			<td>Bleed like me</td>
			<td>Needs more listening</td>
		</tr>
	</tbody>
</table>


<table summary="DVDs I watched recently" class="footcollapse">
	<caption>My recent DVDs</caption>

	<thead>
		<tr>
			<th>Title</th>
			<th>Quality</th>
		</tr>
	</thead>
	<tfoot>
		<tr>

			<th>Total</th>
			<td>5 DVDs</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>Star Trek TNG Season 7</th>

			<td>They lost it</td>
		</tr>
		<tr class="odd">
			<th>Big Fish</th>
			<td>Wonderful Tale</td>
		</tr>
		<tr>

			<th>Closer</th>
			<td>I want my time back!</td>
		</tr>
		<tr class="odd">
			<th>Hot Shots</th>
			<td>Always worth it</td>
		</tr>

		<tr>
			<th>The Party</th>
			<td>A shame there is not more Sellers</td>
		</tr>
	</tbody>
</table>
<p>Yes, the script uses old school DOM1 event calls and hijacks the onload handler, therefore you cannot use it with other scripts for now, this was done as this is a demo of a functionality idea. Fix it and mail it to me if you want to.</p>
<p>Issues to fix:</p>

<ul>
	<li><del>Firefox has a problem showing the border of the footer on the second table, beats me why</del></li>
	<li>Opera's display is totally messed up.</li>
</ul>
<p>If you feel like helping to fix these issues, or want to give general feedback, <a href="http://www.wait-till-i.com/index.php?p=148">please comment on the blog</a>.</p>
<p>All work by Christian Heilmann, arrow icons by <a href="http://www.famfamfam.com/lab/icons/">famfamfam</a></p>
</div>
<script src="/mint/mint.js.php" type="text/javascript" language="javascript"></script>

</body>
</html>
